<!DOCTYPE html>
<script src='../../../../vendor/three.js/build/three.min.js'></script>
<script src='../threex.tweencontrols.js'></script>
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'><script>
	var renderer	= new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	var onRenderFcts= [];
	var scene	= new THREE.Scene();
	var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
	camera.position.z = 3;

	//////////////////////////////////////////////////////////////////////////////////
	//		add an object and make it move					//
	//////////////////////////////////////////////////////////////////////////////////	
	var geometry	= new THREE.CubeGeometry( 1, 1, 1);
	var material	= new THREE.MeshNormalMaterial();
	var object3d	= new THREE.Mesh( geometry, material );
	scene.add( object3d );
	
	onRenderFcts.push(function(delta, now){
		// object3d.rotation.x += 1 * delta;
		// object3d.rotation.y += 2 * delta;		
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		TweenControls
	//////////////////////////////////////////////////////////////////////////////////
	var tweenControls	= new THREEx.TweenControls(object3d)
	onRenderFcts.push(function(){
		tweenControls.update()
	})
	
	window.addEventListener('keydown', function(event){
		if( event.key !== '2' )	return
		var position = new THREE.Vector3(0,0,0)
		var quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0).normalize(), 0)
		var scale = new THREE.Vector3(1,1,1)
		tweenControls.setTarget(position, quaternion, scale)
	})
	window.addEventListener('keydown', function(event){
		if( event.key !== '3' )	return
		var position = new THREE.Vector3(+1,0,0)
		var quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0).normalize(), 2*Math.PI/4)
		var scale = new THREE.Vector3(1,1,1)
		tweenControls.setTarget(position, quaternion, scale)
	})

	window.addEventListener('keydown', function(event){
		if( event.key !== '1' )	return
		var position = new THREE.Vector3(-1,0,0)
		var quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0).normalize(), 0)
		var scale = new THREE.Vector3(1,1,1)
		tweenControls.setTarget(position, quaternion, scale)
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		Customisation
	//////////////////////////////////////////////////////////////////////////////////

	// customize the delay to tween
	tweenControls.tweenDelay	= 1
	// customize the function to tween
	tweenControls.tweenFunction	=  THREEx.TweenControls.Easing.Quintic.Out

	
	//////////////////////////////////////////////////////////////////////////////////
	//		Camera Controls							//
	//////////////////////////////////////////////////////////////////////////////////
	// var mouse	= {x : 0, y : 0}
	// document.addEventListener('mousemove', function(event){
	// 	mouse.x	= (event.clientX / window.innerWidth ) - 0.5
	// 	mouse.y	= (event.clientY / window.innerHeight) - 0.5
	// }, false)
	// onRenderFcts.push(function(delta, now){
	// 	camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
	// 	camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
	// 	camera.lookAt( scene.position )
	// })


	//////////////////////////////////////////////////////////////////////////////////
	//		render the scene						//
	//////////////////////////////////////////////////////////////////////////////////
	onRenderFcts.push(function(){
		renderer.render( scene, camera );		
	})
	
	//////////////////////////////////////////////////////////////////////////////////
	//		loop runner							//
	//////////////////////////////////////////////////////////////////////////////////
	var lastTimeMsec= null
	requestAnimationFrame(function animate(nowMsec){
		// keep looping
		requestAnimationFrame( animate );
		// measure time
		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
		lastTimeMsec	= nowMsec
		// call each update function
		onRenderFcts.forEach(function(onRenderFct){
			onRenderFct(deltaMsec/1000, nowMsec/1000)
		})
	})
</script></body>
